<div class="form-group">
  <label [for]="inputId">{{title}}</label>

  <div class="input-group" [class.is-invalid]="error">
      <div class="input-group-prepend">
        <span class="input-group-text" [style.background-color]="value">&nbsp;&nbsp;&nbsp;</span>
      </div>

      <ng-template #popContent>
        <div style="min-width: 200px;" class="pb-3">
          <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
        </div>

      </ng-template>

      <input class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" placement="bottom" popoverClass="shadow">

      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" (click)="randomize()">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dice-5" viewBox="0 0 16 16">
            <path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z"/>
            <path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm4-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
          </svg>
        </button>
      </div>


    </div>
    <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
    <div class="invalid-feedback">
      {{error}}
    </div>
</div>
